<template>
	<view class="content">
		<view class="login-success-header">
			<view class="user-name-cirle">
				<u-avatar bg-color="#F5CB5A" mode="circle" text="艾莎"></u-avatar>
			</view>
			<view class="user-name-account">
				<view>艾莎-徐州分莎</view>
				<view><img v-for="item in flowerList" :key="'flower' + item" src="@/static/img/flower.png" width="24"
						alt=""></view>
			</view>
		</view>
		<u-gap height="20" bg-color="#eee"></u-gap>
		<view class="all-funcs">
			<view class="every-funcs" @click="handleShowSubjectSelect('learnRecords')">
				<text class="iconfont icon-nav_suoyouzhijieguidangjilu" style="color: #0982D9;">学习记录</text>
				<u-icon name="arrow-right-double"></u-icon>
			</view>
			<view class="every-funcs" @click="handleShowSubjectSelect('startExam')">
				<text class="iconfont icon-zaixiankaoshi" style="color: #0982D9;">发起测验</text>
				<u-icon name="arrow-right-double"></u-icon>
			</view>
			<view class="every-funcs" @click="handleShowSubjectSelect('dataStatistics')">
				<text class="iconfont icon-tongji" style="color: #0982D9;">数据统计</text>
				<u-icon name="arrow-right-double"></u-icon>
			</view>
			<view class="every-funcs" @click="handleShowSubjectSelect('addNewCharacter')">
				<text class="iconfont icon-tongji" style="color: #0982D9;">录入新字词</text>
				<u-icon name="arrow-right-double"></u-icon>
			</view>
		</view>
		<!-- 选择科目 -->
		<u-select v-model="showSubjectSelect" :list="subjectList" @confirm="handleSelectSubject"></u-select>
		<!-- 正在加载 -->
		<Loading v-if="showLoading" :gifUrl="gifUrl"></Loading>
		<!-- 录入汉字 -->
		<AddNewChineseCharacter 
			v-if="addChineseCharacterDialog" 
			@handle-cancel-add="addChineseCharacterDialog = false"
		></AddNewChineseCharacter>
	</view>
</template>

<script>
	let me;
	import funcs from "@/static/js/func.js";
	import Loading from "@/components/common/isLoading.vue";
	import AddNewChineseCharacter from "@/components/addNew/chineseCharacter.vue";
	export default {
		components: {
			Loading,
			AddNewChineseCharacter,
		},
		data() {
			return {
				totalStar: 0, // 几棵花
				// 科目选择
				showSubjectSelect: false,
				subjectList: [{
						label: "语文",
						value: "chinese"
					},
					{
						label: "英语",
						value: "english"
					},
				],
				// 当前进行的是
				currAction: "",
				// 正在加载
				showLoading: false,
				gifUrl: "",
				// 录入新的汉字
				addChineseCharacterDialog: false,
			};
		},
		computed: {
			// 几朵鲜花
			flowerList() {
				let list = [];
				let i = 0;
				while (i < this.totalStar) {
					i++;
					list.push(i + 1);
				}
				return list;
			}
		},
		onShow() {
			this.getTotalStar();
		},
		onLoad() {
			me = this;
		},
		methods: {
			/**
			 * 获取所有科目的总答题数和总正确数
			 */
			getTotalStar() {
				me.gifUrl = `isLoading`;
				me.showLoading = true;
				me.$api.requestTask("/getTotalStar", {}, res => {
					me.showLoading = false;
					if (res.code == "200") {
						let totalRightRate = (res.data.rightChineseNum + res.data.rightEnglishNum) / (res.data
							.allChineseNum + res.data.allEnglishNum)
						me.totalStar = totalRightRate >= 0.9 ? 5 :
							totalRightRate >= 0.75 ? 4 :
							totalRightRate >= 0.6 ? 3 : 2;
					} else {}
				}, err => {
					me.showLoading = false;
				});
			},
			/**
			 * 选择某个科目
			 */
			handleShowSubjectSelect(flag) {
				// me.currAction = flag;
				// me.showSubjectSelect = true;
				if (flag == "learnRecords") { // 语文学习记录
					uni.navigateTo({
						url: "/pages/index/learnChineseRecords"
					})
				} else if (flag == "startExam") { // 语文汉字测验
					uni.navigateTo({
						url: "/pages/index/examChinese"
					})
				} else if (flag == "dataStatistics") { // 语文的答题正确率
					me.getStatistics("/getChineseStatistics");
				} else if (flag == "addNewCharacter") { // 录入语文新学的汉字
					me.addChineseCharacterDialog = true;
				}
			},
			/**
			 * 选择科目后，跳转
			 */
			handleSelectSubject(e) {
				if (e && e.length == 1) {
					if (e[0].value == "chinese") {
						if (me.currAction == "learnRecords") { // 语文学习记录
							uni.navigateTo({
								url: "/pages/index/learnChineseRecords"
							})
						} else if (me.currAction == "startExam") { // 语文汉字测验
							uni.navigateTo({
								url: "/pages/index/examChinese"
							})
						} else if (me.currAction == "dataStatistics") { // 语文的答题正确率
							me.getStatistics("/getChineseStatistics");
						} else if (me.currAction == "addNewCharacter") { // 录入语文新学的汉字
							me.addChineseCharacterDialog = true;
						}
					} else if (e[0].value == "english") {
						if (me.currAction == "learnRecords") { // 英语学习记录
							uni.navigateTo({
								url: "/pages/index/learnEnglishRecords"
							})
						} else if (me.currAction == "startExam") { // 英语测验 
							funcs.showModalTips("正在不遗余力开发中，敬请期待~");
						} else if (me.currAction == "dataStatistics") { // 英语的答题正确率
							me.getStatistics("/englishLearn/getEnglishStatistics");
						} else if (me.currAction == "addNewCharacter") { // 录入英语新学的单词
							funcs.showModalTips("正在不遗余力开发中，敬请期待~");
						}
					}
				}
			},
			/**
			 * 答题记录
			 */
			getStatistics(url) {
				me.gifUrl = `isLoading`;
				me.showLoading = true;
				me.$api.requestTask(url, {}, res => {
					me.showLoading = false;
					if (res.code == "200") {
						let rightRate = res.data.rightWrongAllNum == 0 ? 0 : ((res.data.rightNum / res.data.rightWrongAllNum) * 100).toFixed(2);
						funcs.showModalTips(
							`共测验过${res.data.rightWrongAllNum}题，恭喜您答对${res.data.rightNum}题，正确率为${rightRate}%。`)
					} else {
						funcs.showModalTips("查询失败，请重试~")
					}
				}, err => {
					me.showLoading = false;
					funcs.showModalTips("对不起，系统异常，请稍后重试~")
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		.login-success-header {
			padding: 16rpx;
			display: flex;

			.user-name-cirle {}

			.user-name-account {
				padding-left: 24rpx;
				line-height: 1.4em;

				view:first-child {
					font-size: 1.2em;
					font-weight: bold;
					line-height: 1.6em;
				}
			}
		}

		.all-funcs {
			.every-funcs {
				display: flex;
				justify-content: space-between;
				padding: 0 24rpx;
				height: 3em;
				line-height: 3em;
				border-bottom: 1px solid #ccc;

				/deep/.iconfont {
					span {
						padding-left: 12rpx;
						color: #000;
					}
				}
			}
		}
	}
</style>